import React from 'react'
import { Link } from 'react-router-dom'
import { 
  Row,
  Table,
  Input,
  Button,
  Form,
  // DatePicker,
  Modal,
  message
} from 'antd'
import api from '@/api'
// const { RangePicker } = DatePicker
const FormItem = Form.Item
const ButtonGroup = Button.Group
const { Column } = Table
const confirm = Modal.confirm
export default class Classify extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      filter: {
        limit: 20,
        page: 1,
        name: ''
      },
      // searchLoading: false,
      // 表格中选中的数据
      tableselect: [],
      selectedRowKeys: [],
      malls: [],
      class_count: 0
    }
  }
  componentWillMount() {
    this.fetchList(1)
  }
  fetchList = async (_page) => {
    const filter =  this.state.filter
    filter.page = _page
    let logsdata = null
    let malls = []
    let class_count = 0
    try{
      logsdata = await api.classify_getlist(filter)
    }catch{
      logsdata = {}
    }
    const data =  logsdata.data || {}
    if (data.status === 'success') {
      malls = data.data.class.map((item, index) => {
        return {
          ...item,
          key: `${index}`
        }
      })
      class_count = Number(data.data.class_count)
    }
    this.setState({
      malls,
      class_count,
      filter
    })
  }
  // 搜索
  handleSubmit = (e) => {
    e.preventDefault()
    this.fetchList(1)
  }
  // 批量删除
  delall = () => {
    const { tableselect } = this.state
    if (tableselect.length > 0) {
      const tableselectarr = tableselect.map((item) => {
        return item.id + ''
      })
      confirm({
        title: '提示',
        content: `你确定要删除${tableselect.length}条数据吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          api.classify_batch({ action: 'DELETE', data: tableselectarr }).then(({ data }) => {
            if (data.status === 'success') {
              message.success('删除成功')
              this.fetchList(1)
            }else{
              message.error('删除失败')
            }
          })
        },
        onCancel: () => {
          this.setState({selectedRowKeys: []})
        }
      })
    }else{
      message.error('未选择数据')
    }
  }
  // 删除单个商品
  delmall = (_row, index) => {
    confirm({
      title: '提示',
      content: `你确定要删除分类${_row.name}吗？`,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => {
        api.classify_remove(_row.id).then(({ data }) => {
          if (data.status === 'success') {
            message.success('删除成功')
            const { malls } = this.state
            malls.splice(index, 1)
            this.setState({malls})
          }
        })
      }
    })
  }
  // 分类name-input框
  changefiltername = (e) => {
    const {filter} = this.state
    filter.name = e.target.value
    this.setState({filter})
  }
  // 更改选择的clo
  rowSelectionFun = (selectedRowKeys, selectedRows) => {
    this.setState({selectedRowKeys,tableselect: selectedRows})
  }
  render() {
    const {selectedRowKeys, filter, class_count, malls} = this.state
    return (
      <div>
        <Row
          gutter={20}
          className="mariya-filter-form"
          style={{height: 'auto'}}
          >
          <div className="mariya-filter-form__title">商品分类列表</div>
            <Form
              className="mariya-filter-form__entity"
              layout="inline"
              onSubmit={this.handleSubmit}
            >
            <FormItem>
              <Input
                size="default"
                placeholder="分类名称"
                value={filter.name}
                onChange={this.changefiltername}
                allowClear
              />
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">搜索</Button>
            </FormItem>
          </Form>
          <div className="mariya-filter-form__group">
            <ButtonGroup>
              <Button
                className="m_l_10"
                onClick={this.delall}
              >批量删除
              </Button>
              <Button style={{marginLeft: '10px'}}>
                <Link to={`/classify/new`}>添加分类</Link>
              </Button>
            </ButtonGroup>
          </div>
        </Row>
        <Row
          className="mariya-datagrid"
          >
          <Table
            dataSource={malls}
            rowSelection={{
              onChange: this.rowSelectionFun,
              selectedRowKeys
            }}
            size="small"
            bordered
            pagination={{
              defaultCurrent: 1,
              total: class_count,
              defaultPageSize: filter.limit
            }}
            onChange={({current}) => {this.fetchList(current)}}
            >
            <Column
              title="创建时间"
              dataIndex="name"
              key="name"
            />
            <Column
              title="id"
              dataIndex="id"
              key="id"
            />
            <Column
              title="分类名称"
              dataIndex="created_at"
              key="created_at"
            />
            <Column
              title="商品数量"
              dataIndex="goods_count"
              key="goods_count"
            />
            <Column
              title="排序"
              dataIndex="stor"
              key="stor"
            />
            <Column
              title="更新时间"
              dataIndex="updated_at"
              key="updated_at"
            />
            <Column
              title="操作"
              key="actionbtn"
              width="180px"
              render={(record, index) => (
                <span>
                  <Button>
                    <Link to={`/classify/${record.id}`}>编辑</Link>
                  </Button>
                  <Button
                    onClick={()=> { this.delmall(record, index) }}
                    style={{marginLeft: '10px'}}
                  >删除</Button>
                </span>
              )}
            />
          </Table>
        </Row>
      </div>
    )
  }
}